<template>
  <div>
    <h2 style="text-align: center; margin: auto">用户列表</h2>

    <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible">
      <el-form :data="gridData" :label-width="formLabelWidth">
        <el-form-item label="用户名">
          <el-input v-model="gridData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="gridData.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="gridData.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="gridData.sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="gridData.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="gridData.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="gridData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="gridData.description"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleEdit(gridData)"
          >确 定</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-input
      class="user_put"
      v-model="input"
      placeholder="请输入用户名"
    ></el-input
    ><el-button type="primary" @click="search" onkeydown="search"
      >查询</el-button
    >
    <el-table :data="tableData" style="width: 100%; text-align: center">
      <el-table-column type="index" label="序号" width="100"> </el-table-column>
      <el-table-column prop="username" label="用户名" width="140">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="140">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="sexStr" label="性别" width="120">
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="昵称"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="email"
        label="电子邮箱"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        width="150"
      ></el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="primary" @click="openEditPop(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "userlistview",
  data() {
    // 表格数据
    return {
      tableData: [],
      dialogFormVisible: false,
      gridData: [],
      formLabelWidth: "120px",
      index: "",
      input: "",
      user: {
        username: "",
        nickname: "",
      },
      // //默认展示的页数
      currentPage: 1,
      // // 默认每页显示的条数（可修改）
      PageSize: 1000,
      // //总条数
      totalCount: 1,
      // // 个数选择器（可修改）
      pageSizes: [10, 20, 30, 50, 100],
      page: {
        current: "1",
        size: "10",
      },
    };
  },
  methods: {
    search() {
      const param = {
        username: this.input,
        nickname: this.input,
        page: this.page,
      };
      return;
      this.axios.post(this.$API_URL + "/user/searchUser", param).then((res) => {
        this.tableData = res.data.data.records;
        this.totalCount = res.data.data.total;
        this.currentPage = res.data.data.current;
        this.PageSize = res.data.data.size;
      });
    },
    openEditPop(row) {
      this.dialogFormVisible = true;
      this.gridData = row;
    },
    handleEdit(gridData) {
      this.axios
        .post(this.$API_URL + "/user/updateUser", gridData)
        .then((res) => {
          if (res.data.data === true) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "修改失败",
              type: "error",
            });
          }
        });
      this.dialogFormVisible = false;
    },
    handleDelete(id) {
      this.axios.get(this.$API_URL + "/user/delUser?id=" + id).then((res) => {
        if (res.data.data === true) {
          this.search();
        }
      });
    },
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.page.size = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
      this.search();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // 改变默认的页数
      this.page.current =val;
      this.search();
      // console.log(`当前页: ${val}`);
    },
  },
  created() {},
  mounted() {
    this.search();
  },
};
</script>
<style lang="scss" scoped>
.user_put {
  width: 30%;
  line-height: normal;
}
.el-form-item {
  margin-left: 200px;
  text-align: right;
  width: 50%;
}
</style>
